<template>
  <view class="lite-button" 
        :class="[
          `lite-button--${type}`, 
          { 'lite-button--disabled': disabled },
          { 'lite-button--plain': plain }
        ]"
        :style="buttonStyle"
        @click="handleClick">
    <text class="lite-button__text">{{ text }}</text>
  </view>
</template>

<script>
export default {
  name: 'LiteButton',
  props: {
    text: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: 'default', // default, primary, success, warning, error
      validator: (value) => ['default', 'primary', 'success', 'warning', 'error'].includes(value)
    },
    disabled: {
      type: Boolean,
      default: false
    },
    plain: {
      type: Boolean,
      default: false
    },
    openType: {
      type: String,
      default: ''
    }
  },
  computed: {
    buttonStyle() {
      return {
        opacity: this.disabled ? 0.6 : 1
      }
    }
  },
  methods: {
    handleClick(e) {
      if (!this.disabled) {
        this.$emit('click', e)
        // 处理微信小程序的开放能力
        if (this.openType === 'getPhoneNumber') {
          this.$emit('getphonenumber', e)
        }
      }
    }
  }
}
</script>

<style scoped>
.lite-button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  border-radius: 6px;
  border: 1px solid transparent;
  font-size: 14px;
  transition: all 0.3s;
  cursor: pointer;
  user-select: none;
}

.lite-button__text {
  color: inherit;
  font-size: inherit;
}

/* 默认样式 */
.lite-button--default {
  background-color: #f8f9fa;
  color: #333333;
  border-color: #ddd;
}

.lite-button--default:hover {
  background-color: #e9ecef;
}

/* 主要按钮 */
.lite-button--primary {
  background-color: #007bff;
  color: #ffffff;
}

.lite-button--primary:hover {
  background-color: #0056b3;
}

/* 成功按钮 */
.lite-button--success {
  background-color: #28a745;
  color: #ffffff;
}

.lite-button--success:hover {
  background-color: #1e7e34;
}

/* 警告按钮 */
.lite-button--warning {
  background-color: #ffc107;
  color: #212529;
}

.lite-button--warning:hover {
  background-color: #e0a800;
}

/* 错误按钮 */
.lite-button--error {
  background-color: #dc3545;
  color: #ffffff;
}

.lite-button--error:hover {
  background-color: #c82333;
}

/* 朴素按钮 */
.lite-button--plain {
  background-color: transparent;
}

.lite-button--plain.lite-button--primary {
  color: #007bff;
  border-color: #007bff;
}

.lite-button--plain.lite-button--success {
  color: #28a745;
  border-color: #28a745;
}

.lite-button--plain.lite-button--warning {
  color: #ffc107;
  border-color: #ffc107;
}

.lite-button--plain.lite-button--error {
  color: #dc3545;
  border-color: #dc3545;
}

/* 禁用状态 */
.lite-button--disabled {
  cursor: not-allowed;
}
</style>